<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="static/common/js/plugs/fullPage/css/jquery.fullPage.css">
    <link rel="stylesheet" type="text/css" href="static/front/home/css/fullPage.css">
    <style>
        .section {
            text-align: center;
            font: 50px "Microsoft Yahei";
            color: #fff;
        }
    </style>


</head>

<body>

    <!--header-->
    <div id="header">
        <div class="header-bd">
            <!--logo-->
            <h1 class="logo">
            <a href="#"><img src="static/common/img/w-logo.png" alt="logo" title="众用助手" height="40"></a>
        </h1>
            <!--导航-->
            <ul class="header-nav">
                <li><a href="#">首页</a>
                </li>
                <li><a href="#">产品介绍</a>
                </li>
                <li><a href="#">关于我们</a>
                </li>
                <li><a href="#">登录/注册</a>
                </li>
                <li class="header-nav-app">
                    <a href="#">
                        <span>APP</span>
                        <br />
                        <p>
                            <img src="static/common/img/qrcode.png" alt="二维码" title="扫描下载APP">
                            <br />
                            <span>扫码直接下载</span>
                        </p>
                    </a>
                </li>
            </ul>
        </div>


        <!--右滚屏导航-->
        <!--
       <div id="J-menu">
        <ul>
            <li data-menuanchor="page1" class="active"><a href="#page1"><span class="circle"></span></a></li>
            <li data-menuanchor="page2"><a href="#page2"><span class="circle"></span></a></li>
            <li data-menuanchor="page3"><a href="#page3"><span class="circle"></span></a></li>
            <li data-menuanchor="page4"><a href="#page4"><span class="circle"></span></a></li>
        </ul>
       </div>
-->
    </div>
    <!--/header-->


    <div id="content">
        <div class="section">
            <!--
            <h3>第一屏</h3>
            <p>fullPage.js — 基本演示</p>
-->
            <div class="bg">
                <img src="static/front/home/img/section1.jpg" alt="">
            </div>
            <div class="bg-show-up"></div>
            <div class="bg-wave"></div>
        </div>
        <div class="section">
            <div class="slide">
                <h3>第二屏的第一屏</h3>
            </div>
            <div class="slide">
                <h3>第二屏的第二屏</h3>
            </div>
            <div class="slide">
                <h3>第二屏的第三屏</h3>
            </div>
        </div>
        <div class="section">
            <!--            <h3>第三屏</h3>-->
            <div class="show-up">
                <img src="static/front/home/img/t01f3146e7aa73403a5.png" alt="">
            </div>
            <div class="show-up-shadow"></div>
        </div>
        <div class="section">
            <h3>第四屏</h3>
            <p>这是最后一屏</p>
        </div>
        <div class="section">
            <h3>|</h3>
            <div class="section-bd">
                <div id="J-app-list" class="app-list">
                    <a class="prev" href="javascript:;">&lt;</a>
                    <ul>
                        <li class="app-list-item">
                            <img src="static/front/home/img/%E4%BC%97%E7%94%A8%E5%8A%A9%E6%89%8B-%E5%8F%8D%E5%90%91.png" alt="" width="75" height="75">
                            <span>应用1</span>
                        </li>
                        <li class="app-list-item">
                            <img src="static/front/home/img/%E4%BC%97%E7%94%A8%E5%8A%A9%E6%89%8B-%E5%8F%8D%E5%90%91.png" alt="" width="75" height="75">
                            <span>应用2</span>
                        </li>
                        <li class="app-list-item">
                            <img src="static/front/home/img/%E4%BC%97%E7%94%A8%E5%8A%A9%E6%89%8B-%E5%8F%8D%E5%90%91.png" alt="" width="75" height="75">
                            <span>应用3</span>
                        </li>
                        <li class="app-list-item">
                            <img src="static/front/home/img/%E4%BC%97%E7%94%A8%E5%8A%A9%E6%89%8B-%E5%8F%8D%E5%90%91.png" alt="" width="75" height="75">
                            <span>应用4</span>
                        </li>
                        <li class="app-list-item">
                            <img src="static/front/home/img/%E4%BC%97%E7%94%A8%E5%8A%A9%E6%89%8B-%E5%8F%8D%E5%90%91.png" alt="" width="75" height="75">
                            <span>应用5</span>
                        </li>

                        
                       <li class="app-list-item">
                           <img src="static/front/home/img/%E4%BC%97%E7%94%A8%E5%8A%A9%E6%89%8B-%E5%8F%8D%E5%90%91.png" alt="" width="75" height="75">
                           <span>应用6</span>
                       </li>
    
                    </ul>

                    <a class="next" href="javascript:;">&gt;</a>
                </div>
            </div>
            <!--/section-bd-->

        </div>
    </div>

    <script type="text/javascript" src="static/common/js/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="static/common/js/plugs/fullPage/js/jquery.fullPage.min.js"></script>
    <script type="text/javascript" src="static/common/js/plugs/jquery.scrollBox.js"></script>

    <script>
        $(function () {
            $('#content').fullpage({
                // 内容是否垂直居中
                //                verticalCentered: true,
                // 每一屏背景色
                sectionsColor: ['orange', '#a54bff', '#0695ff', '#ff6c00', '#ff6c00'],
                // 滚屏导航的锚点
                //                anchors: ['page1', 'page2', 'page3', 'page4'],
                //                menu: '#J-menu',
                navigation: true,
                navigationTooltips: ["1", "2", "3", "4", "5"],
            });


            $("#J-app-list").scrollBox({
                parentWidth:1000,
                width:160,
                prevSelector:".prev",
                nextSelector:".next"
            });
        });
    </script>
</body>

</html>